<template>
	<view class="mpopup-body">
		<l-file ref="lFile" @up-success="onSuccess"></l-file>
		
		<!-- 动态表头 -->
		<view class="mpopup-body-thead">
			<view 
				v-for="(col, index) in columns" 
				:key="index"
				:style="{ flex: col.flex || 1, minWidth: col.width }"
				class="mpopup-body-thead-col">
				{{ col.title }}
			</view>
		</view>

		<!-- 动态表体 -->
		<view class="mpopup-body-tbody">
			<template v-for="(group, groupIndex) in groupedData">
				<view 
					v-for="(item, itemIndex) in group.items" 
					:key="item.uniqueId"
					class="mpopup-body-tr">
					<view 
						v-for="(col, colIndex) in columns"
						:key="colIndex"
						:style="{ flex: col.flex || 1, minWidth: col.width }"
						class="mpopup-body-td">
						<!-- 自定义列内容渲染 -->
						<template v-if="col.type === 'checkbox'">
							<uni-data-checkbox
								v-model="item[col.field]"
								:localdata="checkOptions"
								@change="$emit('change', { col, item })"/>
						</template>
						
						<template v-else-if="col.type === 'file'">
							<text v-if="item[col.field]" class="file-link" @click="previewFile(item[col.field])">
								{{ getFileName(item[col.field]) }}
							</text>
							<button v-else @click="onUpload(item, col)">上传</button>
						</template>

						<template v-else-if="col.formatter">
							{{ col.formatter(item[col.field], item) }}
						</template>

						<template v-else>
							{{ item[col.field] || '-' }}
						</template>
					</view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
export default {
	props: {
		// 列配置
		columns: {
			type: Array,
			default: () => [
				{ 
					title: '核查内容', 
					field: 'context', 
					flex: 2,
					type: 'text'
				},
				{ 
					title: '结果判断', 
					field: 'delFlag',
					type: 'checkbox',
					width: '150px'
				},
				{
					title: '附件',
					field: 'fileUrl',
					type: 'file',
					formatter: (val) => val ? '已上传' : '未上传'
				}
			]
		},
		// 其他原有props...
	},
	methods: {
		onUpload(item, col) {
			this.currentItem = item;
			this.currentCol = col;
			this.$refs.lFile.upload();
		},
		onSuccess(res) {
			if (this.currentItem && this.currentCol) {
				this.$set(this.currentItem, this.currentCol.field, res.url)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.mpopup-body {
	display: flex;
	flex-direction: column;
	
	&-thead {
		display: flex;
		background: #f5f7fa;
		padding: 12px 0;
		
		&-col {
			padding: 0 12px;
			font-weight: 600;
			border-right: 1px solid #ebeef5;
			&:last-child { border-right: none; }
		}
	}

	&-tbody {
		flex: 1;
		overflow: auto;
	}

	&-tr {
		display: flex;
		border-bottom: 1px solid #ebeef5;
		transition: background 0.3s;
		&:hover { background: #fafafa; }
	}

	&-td {
		padding: 12px;
		min-height: 60px;
		display: flex;
		align-items: center;
		border-right: 1px solid #ebeef5;
		&:last-child { border-right: none; }
		
		.file-link {
			color: #409eff;
			cursor: pointer;
			&:hover { text-decoration: underline; }
		}
	}

	@media (max-width: 768px) {
		&-thead, &-tr {
			min-width: 600px; // 保持横向滚动
		}
	}
}
</style>